<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>seedforweb.cn</title>
    <script src="js/jquery-3.0.0.js"></script>
    <script type="text/javascript" src="js/showdown.min.js"></script>
    <script src="js/highlight.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="dist/javascripts/thinker-md.vendor.min.js"></script>
    <style>
        @import "dist/stylesheets/thinker-md.user.css";
        @import "dist/stylesheets/thinker-md.vendor.css";
        @import "dist/emoji/nature.css";
        @import "dist/emoji/object.css";
        @import "dist/emoji/people.css";
        @import "dist/emoji/place.css";
        @import "dist/emoji/Sysmbols.css";
        @import "dist/emoji/twemoji.css";
        /**/
        @import "css/hybrid.min.css";
        @import "css/table-style.css";
        @import "css/aritlce_editor.css";
    </style>



</head>
<style>

</style>
<body>

    <div id="article_editor">
        <input id="art_title" placeholder="文章标题：那是梦开始的地方" />
        <div id="albums">
            <ul id="chooseAlbums" class="inline-block">
            </ul>
            <input id="choice_albums" placeholder="在这里选择所属专辑">
        </div>

        <div >
            <ul id="albumList">

            </ul>
        </div>


        <div id="tags" >
            <ul id="choiced_tag">
            </ul>
            <input id="tag_input" placeholder="在这里添加或选择标签">
        </div>


        <div id="tagDataList" data="" >
        </div>
        <div id="addTagButton">
            <a class="data-li" href="javascript:0;">添加标签..</a>
        </div>

        <div id="editor">
            <textarea placeholder="在这里编辑文章内容"></textarea>
            <!--<div id="e_head">editor_head</div>-->
            <!--<div id="editor_body">-->
                <!--<div id="e_content">-->
                    <!--<textarea id="e_textarea" style="width: 50px" onkeyup="compile()" placeholder="在这里编写内容"></textarea>-->
                <!--</div>-->
                <!--<div id="editor_vertical_wall"></div>-->
                <!--<div id="preview"></div>-->
                <!--<div id="data" data-tech="{'id':1,'name':'tot'}"></div>-->

            <!--</div>-->
        </div>
        <!-- hidden window-->
        <div id="hideWindow" style="display: none">
            <div class="win_background transparent_class"></div>
            <div id="window_panel">
                <div id="window">
                    <div id="win_head">
                        <span id="win_title">创建标签</span>
                        <a id="win_close" href="javascript:void(0);">×</a>
                    </div>
                    <div id="win_body">
                        <input id="tag_add_name" placeholder="请输入标签名称"/>

                        <textarea id="tag_add_desc" placeholder="请输入标签描述"></textarea>

                        <button id="tag_add_confirm" name="确定">确 定</button>
                        <button id="tag_add_cancel" name="取消" value="取消">取 消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
//    //编辑器大小调整js
//    var initMethod = function initSize(){
//        $("#editor_body").height(window.innerHeight-100);
//        var editorBodyHeight = $("#editor_body").height();
//        var editorBodyWidth = $("#editor_body").width();
//        var editorWidth = editorBodyWidth/2-15;
//        var verticalWallWidth = 15;
//        var previewWidth = editorBodyWidth - verticalWallWidth - editorWidth-4;
//        $("#e_textarea").height(editorBodyHeight);
//        $("#e_textarea").width(editorWidth);
//        $("#editor_vertical_wall").height(editorBodyHeight);
//        $("#editor_vertical_wall").width(verticalWallWidth);
//        $("#preview").height(editorBodyHeight);
//        $("#preview").width(previewWidth);
////        $("#data").attr("");
//
//
//
//    }
//    initMethod();
//
//    $(window).resize( function(){
//        initMethod();
//    });
//
//
//    //md装换js
//
//    var formatPreCode = function(){
//        $('pre code').each(function(i, block) {
//            hljs.highlightBlock(block);
//        });
//    }
//
//    function compile(){
//        var text = $("#e_textarea").val();
//        var converter = new showdown.Converter();
//        showdown.setOption("tables",true)
//        var html = converter.makeHtml(text);
//        $("#preview").html(html);
//        formatPreCode();
//
//    }
//
//    //textArea支持tab
//    $("textarea").on('keydown',function(e){
//        if(e.keyCode == 9){
//            e.preventDefault();
//            var indent = '    ';
//            var start = this.selectionStart;
//            var end = this.selectionEnd;
//            var selected = window.getSelection().toString();
//            selected = indent + selected.replace(/\n/g,'\n'+indent);
//            this.value = this.value.substring(0,start) + selected + this.value.substring(end);
//            this.setSelectionRange(start+indent.length,start+selected.length);
//        }
//    })

</script>
<script>
    //服务器数据加载
    function tagsInit(){
        var tagsFormServer =  '[{"id":"1","name":"javascript"},{"id":"2","name":"java"}]';//todo 替换掉
        $("#tagDataList").attr("data",tagsFormServer);
    }
    tagsInit();
    var tagsObjFormServer = $.parseJSON($("#tagDataList").attr("data"));
    var indexArray = new Array();
    for(index in tagsObjFormServer){
        tag = tagsObjFormServer[index];
        indexArray[tagsObjFormServer[index].name] = tagsObjFormServer[index];


    }

    function tagDataListAddTag(tag){
        var buttonNode = document.createElement("a");
        buttonNode.setAttribute("data-id",tag.id);
        buttonNode.setAttribute("data",JSON.stringify(tag));
        buttonNode.setAttribute("href","javascript:0;");
        buttonNode.setAttribute("class","data-li");
        buttonNode.innerHTML = tag.name;
        //定义单机事件
        buttonNode.onclick = function(){
            $("#choiced_tag").append($(this));
            //修改样式
            $(this).css("display","inline-block");
            $(this).css("background-color","#2d578d");
            $(this).css("color","white");
            $(this).css("border-radius","3px");
            $(this).css("margin","0 3px");
            // 修改单击相应:单击即删除该对象
            this.onclick = function(){
                $(this).remove();
            };

        };

        $("#tagDataList").append(buttonNode);
        var left = $("#tag_input").offset().left;
        $("#tagDataList").css("left",left);
        $("#tagDataList").css("display","block");
    }
    function clearTagDataList(){
        $("#tagDataList").html("");
    }


    function showAddTagButton(){
        $("#addTagButton").css("display","block");
        //调整位置
        var left = $("#tag_input").offset().left;
        $("#addTagButton").css("left",left);

    }

    var showAddTagWin =  function(){
        $("#hideWindow").css("display","block");
    };

    $("#addTagButton a").on("click",function(){
        $("#hideWindow").css("display","block");
    });

    $("#tag_input").on("keydown",function(e){
//
        if(e.keyCode == 13){
            clearTagDataList();
            var inputStr = $("#tag_input").val();
            for(key in indexArray){
                if(inputStr.trim().length <= 0){
                    tagDataListAddTag(indexArray[key]);
                } else {

                    //找到匹配的key
                    if(key.indexOf(inputStr) != -1){
                        tagDataListAddTag(indexArray[key]);
                    } else {//没找到弹出添加界面
                        showAddTagButton();
                    }

                }


            }
        }
    });

    //
    $("#win_close").on("click",function(){
        $("#hideWindow").css("display","none");
    });


    //album 交互js

    //获取数据
    var albumData = '[{"id":"1","code":"alpha","desc":"编程基础"},{"id":"2","code":"server","desc":"服务端开发"},{"id":"3","code":"client","desc":"前端开发"},{"id":"4","code":"db","desc":"数据库"},{"id":"5","code":"env","desc":"编程环境"},{"id":"6","code":"album","desc":"专题系列"},{"id":"7","code":"bugnote","desc":"错误笔记"},{"id":"8","code":"monkey","desc":"程序员"},{"id":"9","code":"news","desc":"业界资讯"},{"id":"10","code":"doc","desc":"资料下载"},{"id":"11","code":"mark","desc":"推荐"}]';
    var albumDataArray =  $.parseJSON(albumData);
    var albumKeyMap = new Array();
    for(id  in albumDataArray){
        var obj = albumDataArray[id];
        albumKeyMap[obj.desc] = obj;
    }

    function clearAlbumListData(){
        $("#albumList").html("");
    }
    function putAlbumData(album){
        //设置下拉列表可见
        $("#albumList").css("display","block");

        var aNode = document.createElement("a");
        aNode.setAttribute("data-id",album.id);
        aNode.setAttribute("data",JSON.stringify(album));
        aNode.setAttribute("class","data-li");
        aNode.setAttribute("href","javascript:0;");
        aNode.innerHTML = album.desc;
        //设置位置


        //定义单机事件
        aNode.onclick = function(){
            $("#chooseAlbums").append($(this));
            //改变样式
            $(this).css("display","inline-block");
            $(this).css("background-color","#2d578d");
            $(this).css("color","white");
            $(this).css("border-radius","3px");
            $(this).css("margin","0 3px");
            // 修改单击相应:单击即删除该对象
            this.onclick = function(){
                $(this).remove();
            };

        };
        //设置albumList位置
        var left = $("#choice_albums").offset().left;
        $("#albumList").css("left",left);
        $("#albumList").append(aNode);
    }

    //点击空白处隐藏弹出菜单
    $(document).on("click",function(){
        $("#albumList").css("display","none");
        $("#tagDataList").css("display","none");
        $("#addTagButton").css("display","none");
    });
    $("#albumList").on("click",function(){
        return false;
//        $("#albumList").css("display","none");
    });
    $("#tagDataList").on("click",function(){
        return false;
//        $("#albumList").css("display","none");
    });
    $("#addTagButton").on("click",function(){
        return false;
//        $("#albumList").css("display","none");
    });




    $("#choice_albums").on("keydown",function(e){
//
        if(e.keyCode == 13){
            clearAlbumListData();
            var inputStr = $("#choice_albums").val();
            for(key in albumKeyMap){
                //找到匹配的key
                if(inputStr.trim().length <= 0){
                    putAlbumData(albumKeyMap[key]);
                    continue;
                }
                if(key.indexOf(inputStr) != -1 || albumKeyMap[key].code.indexOf(inputStr) != -1){
                    //列出值来
                    putAlbumData(albumKeyMap[key]);
                }
            }
        }
    })


</script>

<script>
    $("#editor textarea").markdown({
        language: 'zh',
        fullscreen: {
            enable: true
        },
        resize: 'vertical',
        localStorage: 'md',
        imgurl: '/c/imgUpload',
        base64url: '/c/imgUpload',
        flowChart : true,
        savable:true
    });
</script>
</html>